<!-- 搜索页面组件 -->
<template>
	<view>
		<!-- 收索页面收索框 -->
		<u-search placeholder="快乐池塘小跳蛙" color="#666" height="20" margin="20rpx" actionText="取消" @custom="onClick"
			v-model="keyword" @change="change" @search="onSearch">
		</u-search>
		<!-- 搜索下推荐 -->
		<view v-if="keyword===''">
			<text class="title">热门搜索</text>

			<view class="content">
				<view class="content_child" v-for="(item,index) in list" :key="index">
					<view :class="item.class">
						<text>{{item.num}}</text>
					</view>
					<text class="text" @click="onClickText(item.text)">{{item.text}}</text>
				</view>
			</view>
		</view>
		<view class="historyBox" v-else>
			<view class="historytitle">
				<text class="title">历史记录</text>
				<u-icon name="trash" @click="onDelet" size=30></u-icon>
			</view>

			<view class="content">
				<view class="content_child" v-for="(item,index) in history" :key="index">
					<view class="tag">
						<text>{{index+1}}</text>
					</view>
					<text class="text">{{item}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			arr: {
				type: Array,
				default () {
					return []
				}
			},
			show: {
				type: Boolean,
				default: false
			}

		},
		data() {
			return {
				text: 'history',
				keyword: '',
				history: this.arr,
				list: [{
						num: 1,
						text: '中秋节',
						class: "tag zqj"
					},
					{
						num: 2,
						text: '端午节',
						class: "tag dwj"
					},
					{
						num: 3,
						text: '情人节',
						class: "tag qrj"
					},
					{
						num: 4,
						text: '医师节',
						class: "tag"
					},
					{
						num: 5,
						text: '元宵节',
						class: "tag"
					},
					{
						num: 6,
						text: '春节',
						class: "tag"
					},
					{
						num: 7,
						text: '大理',
						class: "tag"
					},
					{
						num: 8,
						text: '重庆',
						class: "tag"
					}
				]
			}
		},
		methods: {
			onClick() {
				// 点击取消隐藏搜索层
				this.$emit('onclickk', !this.show)
			},
			onClickText(val) {
				// console.log(val);
				this.keyword = val
				this.history.push(this.keyword)
				uni.setStorageSync('history', JSON.stringify(this.history))
				this.ongotProtection(this.keyword)
				this.onClick()
			},
			change(e) {
				// console.log(e);
			},
			onSearch() {
				if(!this.keyword){
					return
				}
				console.log(this.keyword);
				this.ongotProtection(this.keyword)
				this.history.push(this.keyword)
				console.log(this.history);
				uni.setStorageSync('history', JSON.stringify(this.history))
				this.keyword = ''
				this.onClick()

			},
			ongotProtection(key) {
				if (uni.getStorageSync('token')) {
					uni.navigateTo({

						url: `/pages/topck/topck?type=${key}`
					})
				} else {
					uni.showModal({
						title: '登录提示',
						content: '您还没有进行登录,是否进行登录',
						success: function(res) {
							if (res.confirm) {
								uni.switchTab({
									url: '/pages/user/user'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			onDelet() {
				console.log(123);
				this.history = []
				this.$emit('clickIcon', this.text)
			}
		}
	}
</script>

<style lang="scss">
	.title {
		font-size: 40rpx;
		color: #000000;
		padding-left: 30rpx;
	}

	.content {
		margin-top: 30rpx;
		margin-left: 60rpx;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.content_child {
			width: 45%;
			display: flex;
			justify-content: left;
			align-items: center;

			.tag {
				width: 50rpx;
				height: 50rpx;
				background-color: #ffffff;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 50rpx;
			}

			.zqj {
				background-color: #ff5500;
			}

			.dwj {
				background-color: #ff8c00;
			}

			.qrj {
				background-color: #ffaa00;
			}

			.text {
				display: block;
				height: 70rpx;
				line-height: 50rpx;
				text-align: center;
				color: #000000;
			}
		}
	}

	.historytitle {
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}
</style>
